/*
 *  Copyright 2023 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import (reference) '../../../../styles/variables.less';

.profile-dropdown {
  .ant-dropdown-menu-item-group {
    padding: 6px 4px;

    .ant-dropdown-menu-item-group-list {
      padding-left: 14px;
    }

    .ant-dropdown-menu-item-group-title {
      padding: 4px 0;
    }

    .ant-dropdown-menu-item-only-child {
      padding: 4px 0 4px 6px;
      border-radius: 4px;
    }

    .ant-dropdown-menu-item-disabled {
      color: inherit;
      cursor: default;
    }
  }

  .default-persona-container {
    min-width: 0;
  }

  .default-persona-tag {
    border-radius: 6px;
    border: 1px solid @primary-50;
    background: @blue-22;
    box-shadow: @button-box-shadow-default;
    color: @primary-7;
    text-align: center;
    font-size: @size-sm;
    font-style: normal;
    font-weight: @font-medium;
  }
}

.user-profile-btn.ant-btn {
  padding: 0;
  gap: @padding-md;

  &:hover,
  &:active,
  &:focus {
    background: none;
    border-color: transparent;
  }

  .app-bar-user-profile-pic {
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  .name-persona-container {
    max-width: 120px;
    display: flex;
    flex-direction: column;
    line-height: 20px;
    text-align: left;

    .ant-typography {
      width: 100%;
      // add ellipsis to the text
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    // Need to change this to 14px
    font-size: @font-size-base;
  }
}

.persona-label {
  .ant-typography {
    width: 160px;
  }
}
